<template>
  <div class="ns-main">
    <div class="js_editBox" style>
      <div class="menu_preview_area">
        <div class="mobile_menu_preview">
          <div class="mobile_hd tc">微信公众号菜单</div>
          <div class="mobile_bd">
            <!-- 菜单 -->
            <ul class="pre_menu_list grid_line" id="menuList">
              <!-- 加载菜单 -->
              <li
                class="pre_menu_item size1of3"
                :class="{'current': activeItem==but}"
                :key="index"
                v-for="(but,index) in buttons"
              >
                <!-- 一级菜单 -->
                <a
                  href="javascript:void(0);"
                  class="pre_menu_link jsMenu"
                  @click="editBut(but, null)"
                >
                  <i class="icon_menu_dot js_icon_menu_dot dn"></i>
                  <span>{{but.name}}</span>
                </a>
                <!-- 一级菜单 -->
                <!-- 二级菜单 -->
                <div class="sub_pre_menu_box">
                  <ul class="sub_pre_menu_list">
                    <!-- 限制二级菜单数量的添加    -->
                    <li
                      class="jsSubMenuInner"
                      :class="{'current': activeItem==subBut}"
                      :key="index2"
                      v-for="(subBut,index2) in but.sub_button"
                    >
                      <a href="javascript:void(0);" @click="editBut(subBut,but)">
                        <span class="sub_pre_menu_inner">{{subBut.name}}</span>
                      </a>
                    </li>
                    <li class="jsSubMenu" v-show="but.sub_button.length<5">
                      <a
                        href="javascript:void(0);"
                        title="最多添加5个子菜单"
                        @click="addSubBut(but.sub_button, but)"
                      >
                        <span class="sub_pre_menu_inner">
                          <i class="icon14_menu_add" style="background-position: 0 0;"></i>
                        </span>
                      </a>
                    </li>
                  </ul>
                  <i class="arrow arrow_out"></i>
                  <i class="arrow arrow_in"></i>
                  <!-- 箭头 -->
                </div>
                <!-- 二级菜单 -->
              </li>
              <!-- 限制一级菜单数量的添加 -->
              <li class="js-addMenuBtn pre_menu_item size1of3" v-show="buttons.length<3">
                <a
                  href="javascript:void(0);"
                  class="pre_menu_link"
                  title="最多添加3个一级菜单"
                  @click="addBut"
                >
                  <i class="icon14_menu_add"></i>
                </a>
              </li>
            </ul>
            <!-- 菜单 -->
          </div>
        </div>
      </div>
      <div class="menu_form_area">
        <!-- 点击左侧菜单进行编辑操作 -->
        <div id="js_rightBox" class="portable_editor to_left">
          <div class="editor_inner" v-if="activeItem.name">
            <div class="global_mod float_layout menu_form_hd js_second_title_bar">
              <h4 class="global_info">当前菜单</h4>
              <div class="global_extra">
                <!-- <a href="javascript:void(0);" id="jsDelBt" @click="delBut">删除子菜单</a> -->
                <el-button type="text" @click="delBut">删除</el-button>
                <el-button type="text" @click="btnMov(1)">上移</el-button>
                <el-button type="text" @click="btnMov(0)">下移</el-button>
              </div>
            </div>
            <div class="menu_form_bd" id="view">
              <el-form label-width="120px">
                <el-form-item label="菜单名称">
                  <el-input v-model="activeItem.name" placeholder></el-input>
                </el-form-item>
                <el-form-item label="菜单类型" v-if="activeItem.type">
                  <!-- <el-input v-model="activeItem.type" placeholder=""></el-input> -->
                  <el-radio-group v-model="activeItem.type">
                    <el-radio :key="key" :label="key" v-for="(item,key) in buttonTypes">{{item}}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item :label="buttonTypes[activeItem.type]" v-if="activeItem.type">
                  <!-- url: '', key: '', media_id  view:'链接', click:'触发关键字', view_limited:'跳转图文'}, -->
                  <el-input
                    v-if="activeItem.type=='view'"
                    v-model="activeItem.url"
                    placeholder="输入链接"
                  ></el-input>
                  <el-input
                    v-else-if="activeItem.type=='click'"
                    v-model="activeItem.url"
                    placeholder="触发关键字"
                  ></el-input>
                  <el-input
                    v-else-if="activeItem.type=='view_limited'"
                    v-model="activeItem.url"
                    placeholder="跳转图文"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div class="menu_content_container js_setGraphic"></div>
            </div>
          </div>
        </div>
        <!-- 点击左侧菜单进行编辑操作 -->
      </div>
    </div>
  </div>
</template>

<script>
import '../assets/css/wxmenu.css'
const types = {}
const request = {}
export default {
  mixins: [],
  data() {
    return {
      boxUrl: '/admin/weixin.media/mediaSave',
      boxUrlSave: '/admin/weixin.media/mediaSave',
      mediaType: 'news',
      media_id: 0,
      boxAction: 0,
      activeItem: {},
      textValue: '',
      textId: 0,
      buttons: [],
      //newsInit : { title: "", author: "", cover: "", show_cover_pic: 0, summary: "", content: "", content_source_url: ""},
      newsList: [
        {
          title: '标题1',
          author: '',
          cover: '',
          show_cover_pic: 0,
          summary: '',
          content: '',
          content_source_url: ''
        },
        {
          title: '标题2',
          author: '',
          cover: '',
          show_cover_pic: 0,
          summary: '',
          content: '',
          content_source_url: ''
        }
      ],
      news1: {
        title: '标题1',
        author: '',
        cover: '',
        show_cover_pic: 0,
        summary: '',
        content: '',
        content_source_url: ''
      },
      curItem: null,
      hoverIndex: -1,
      activeIndex: 0
    }
  },
  created() {
    this.curItem = this.newsList[this.activeIndex]
  },
  watch: {
    mediaType(v) {
      if (this.boxAction == 0) {
        if (v == 'news') {
          this.curItem = this.newsList[this.activeIndex]
        } else if (v == 'news1') {
          this.curItem = this.news1
          console.log('change', this.news1)
        }
      }
    }
  },
  methods: {
    openHandler() {
      this.media_id = 0
      this.mediaType = 'news'
      this.boxAction = 0

      if (!!this.$parent.tbActiveRow) {
        this.boxAction = 1 //修改
        const { id, type } = this.$parent.tbActiveRow
        this.media_id = id
        this.mediaType = types[type]
        this.boxLoading = true
        request({ url: this.boxUrl, method: 'get', params: { id: id } })
          .then(res => {
            this.boxLoading = false
            if (res.status == 1) {
              const rows = res.data
              if (rows.length > 0) {
                if (this.mediaType == 'text') {
                  this.textValue = rows[0].title //内容为空
                  this.textId = rows[0].id
                } else if (this.mediaType == 'news1') {
                  this.news1 = rows[0]
                  this.curItem = this.news1
                //   console.log('curItem', news1)
                } else if (this.mediaType == 'news') {
                  this.newsList = rows
                  this.activeIndex = 0
                  this.curItem = rows[0]
                }
              } else {
                if (this.mediaType == 'text') {
                  this.textValue = ''
                } else if (this.mediaType == 'news1') {
                //   this.curItem = rows1
                }
              }
            }
          })
          .catch(() => {
            this.boxLoading = false
          })
      }
    },
    save() {
      let item
      this.boxLoading = true
      if (this.mediaType == 'text') {
        item = { id: this.textId, title: this.textValue }
      } else if (this.mediaType == 'news1') {
        item = this.news1
      } else if (this.mediaType == 'news') {
        item = this.newsList
      }
      request({
        url: this.boxUrl,
        method: 'post',
        data: { id: this.media_id, type: this.mediaType, item: item }
      })
        .then(res => {
          this.boxLoading = false
          if (res.status == 1) {
            this.visible = false
            this.$emit('submit')
          }
        })
        .catch(error => {
          this.boxLoading = false
        })
    },

    mouseoverHandler() {
      console.log('over')
    },
    edit(item, index) {
      this.activeIndex = index
      this.curItem = this.newsList[index]
    },
    addBut() {

    },
    add() {
      this.newsList.push({
        title: '',
        author: '',
        cover: '',
        show_cover_pic: 0,
        summary: '',
        content: '',
        content_source_url: ''
      })
    },
    show_cover_pic() {},
    closeHandler() {
      this.textValue = ''
      this.newsList = [
        {
          title: '标题1',
          author: '',
          cover: '',
          show_cover_pic: 0,
          summary: '',
          content: '',
          content_source_url: ''
        },
        {
          title: '标题2',
          author: '',
          cover: '',
          show_cover_pic: 0,
          summary: '',
          content: '',
          content_source_url: ''
        }
      ]
      this.news1 = {
        title: '标题1',
        author: '',
        cover: '',
        show_cover_pic: 0,
        summary: '',
        content: '',
        content_source_url: ''
      }
    }
  }
}
</script>
